<template>
  <!-- 客户开卡登记 -->
  <el-dialog
    v-if="visible"
    v-el-drag-dialog
    title="客户开卡登记"
    :visible.sync="visible"
    width="50%"
    @close="reset"
  >
    <!-- 客户信息 -->
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">客户开卡登记</span>
      </div>
      <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="118px">
        <el-form-item label-width="0">
          <el-input v-model="temp.param" placeholder="请输入">
            <el-select slot="prepend" v-model="qtype" style="width: 100px;" placeholder="请选择">
              <el-option label="客户电话" value="csmRgPhone" />
              <el-option label="客户编号" value="csmCode" />
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="clearData">重置</el-button>
        </el-form-item>
        <div class="form-icon">
          <div class="icon-info"><i class="el-icon-price-tag" />客户编号&nbsp;:&nbsp;<span>{{ userInfo.csmCode }}</span></div>
          <div class="icon-info"><i class="el-icon-user" />客户名称&nbsp;:&nbsp;<span>{{ userInfo.csmName }}</span></div>
        </div>
        <el-form-item label="充值绑定手机号:">
          <el-select v-model="temp.csmPhone" style="width: 100%;" placeholder="请选择">
            <el-option
              v-for="(i, ind) in phoneItems"
              :key="ind"
              :label="i.csmPhone"
              :value="i.csmPhone"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="验证码:" prop="">
          <el-input v-model="temp.messageCode" placeholder="请输入" />
          <el-button type="primary" @click="sendMessageCode">{{ btnCode }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 押金信息 -->
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">开卡充值</span>
      </div>
      <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="100px">
        <el-form-item label="卡类型:" style=" display: flex; align-items: center;">
          <el-radio-group v-model="temp.cardType">
            <el-radio :label="1">实体卡</el-radio>
            <el-radio :label="2">虚拟卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工本费:">
          <el-input v-model="temp.cardFee" placeholder="请输入" :disabled="true" />
        </el-form-item>
        <el-form-item label="卡号:">
          <el-input v-model="temp.cardCode" placeholder="请输入" :disabled="true" />
          <el-button type="primary" @click="addCardCode">获取卡号</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="100px">
        <el-form-item label="付款密码:" prop="password1">
          <el-input v-model="temp.password1" placeholder="请输入" show-password :maxlength="6" />
        </el-form-item>
        <el-form-item label="确认密码:" prop="password2">
          <el-input v-model="temp.password2" placeholder="请输入" show-password :maxlength="6" />
        </el-form-item>
        <el-form-item label="充值金额:" prop="">
          <el-input v-model="temp.feeCount1" placeholder="请输入" @input="onInput($event)" @blur="formatInput($event)" />
        </el-form-item>
        <el-form-item label="赠送金额:">
          <el-input v-model="temp.feeCount2" placeholder="请输入" :disabled="true" />
        </el-form-item>
        <el-form-item label="卡内余额:">
          <el-input v-model="temp.cardStatus" placeholder="请输入" :disabled="true" />
        </el-form-item>
        <el-form-item label="应收金额:">
          <el-input v-model="temp.totalPrice" placeholder="请输入" :disabled="true" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <span style="font-size: 14px; color: red;">充值完成前请勿移开卡片</span>
      <el-button type="primary" @click="save">充值写卡</el-button>
      <el-button @click="reset">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { SmartReader, FUNCIDS } from '../js/interface'
  import { topUpAdministrationUserInfo, topUpAdministrationCode, topUpAdministrationCradCode, topUpAdministrationPrice, topUpAdministrationSave, topUpAdministrationDefault } from '@/api'

  export default {
    name: 'open-crad',
    data() {
      return {
        visible: false,
        qtype: 'csmRgPhone',
        userInfo: {},
        phoneItems: [],
        countdown: 60, // 发送验证码时间60秒
        startSendMessageCode: 0, // 初始化为0
        btnCode: '发送验证码',
        timer: '',
        params: {}, // 表单提交参数
        temp: {
          param: '',
          csmPhone: '',
          messageCode: '', // 验证码
          cardType: 1,
          cardFee: 22.22,
          totalPrice: 22.22, // 应收金额
          cardCode: '',
          password1: '', // 付款密码
          password2: '', // 确认密码
          feeCount1: '0.00', // 充值金额
          feeCount2: '0.00', // 赠送金额
          cardStatus: '0.00' // 卡内余额
        },
        rules: {
          password1: [{ required: true, message: '请输入密码', trigger: 'change' }],
          password2: [{ required: true, message: '请再次输入密码', trigger: 'change' }]
        },
        // 读卡/写卡相关参数
        locked: false,
        comeFromSubmit: '', // 读取来源
        readerIndex: 1, // 当前读取扇区
        csmCardRWType: 0, // 0是默认状态 1是读卡状态 2是写卡状态 3是清卡状态
        obj: null, // 读卡器函数
        icdev: -1,
        isComOpen: false,
        gl_sector: 0, // 扇区 0-15扇区  总共64个扇区
        gl_wantFunc: 0,
        readClass: 1,
        writeClass: 2,
        hasCard: false,
        gl_BinBlock: 1, // 快   0-63 但0不可用,
        readerCardCode: '', // 读卡号
        readerStrCode: '', // 当前卡第二扇区值
        writerCsmCard: '', // 写卡号
        isFlag: false // 接口是否发送成功
      }
    },
    computed: {

    },
    watch: {
      // 实体卡/虚拟卡
      'temp.cardType': {
        handler(val) {
          // 设置实体卡工本费
          this.temp.cardFee = 22.22
          // 设置应收金额
          this.temp.totalPrice = 22.22
        }
      }
    },
    async created() {},
    // mounted() {
    //   await this.initCardServer()
    // },
    methods: {
      open(temp) {
        Promise.all([this.initCardServer()])
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      // 保存
      async save() {
        const _this = this
        this.$refs.dataForm.validate().then(async(res) => {
          // 校验客户编码
          if (!this.userInfo.csmCode) {
            this.$message({
              type: 'warning',
              message: '请先查找客户编码'
            })
            return
          }
          // 校验手机号码
          if (!this.temp.csmPhone) {
            this.$message({
              type: 'warning',
              message: '请填写手机号码'
            })
            return
          }
          if (this.phoneItems.length === 0) {
            this.$message({
              type: 'warning',
              message: '请先查询客户'
            })
            return
          }
          // 校验验证码
          if (!this.temp.messageCode.trim()) {
            this.$message({
              type: 'warning',
              message: '验证码不能为空'
            })
            return
          }
          if (this.temp.messageCode.length !== 6) {
            this.$message({
              type: 'warning',
              message: '验证码位数不对'
            })
            return
          }
          // 校验卡编号
          if (!this.temp.cardCode) {
            this.$message({
              type: 'warning',
              message: '卡编号不能为空'
            })
            return
          }
          if (this.temp.password1 !== this.temp.password2) {
            this.$message({
              type: 'warning',
              message: '确认密码与付款密码不相同'
            })
            return
          }
          // 余额充值
          if ((this.temp.feeCount1) * 1 < 0) {
            this.$message({
              type: 'warning',
              message: '充值金额必须大于0'
            })
            return
          }
          // 处理参数
          this.params = {
            csmId: this.userInfo.csmId,
            csmCode: this.userInfo.csmCode,
            csmName: this.userInfo.csmName,
            csmPhone: this.temp.csmPhone,
            cardFee: this.temp.cardFee * 100,
            cardType: this.temp.cardType,
            cardCode: this.temp.cardCode,
            password: this.temp.password1,
            rcType: 1,
            // cardSurplus: 0,
            messageCode: this.temp.messageCode,
            accCsmcardRecordList: [{
              rcType: 1,
              cardType: this.temp.cardType,
              cardCode: this.temp.cardCode,
              feeCount: (this.temp.feeCount1 * 1) + (this.temp.feeCount2 * 1) * 100,
              feeCount1: this.temp.feeCount1 * 100,
              feeCount2: this.temp.feeCount2 * 100,
              singleMoney: this.temp.feeCount1 * 100
            }]
          }
          // 掉接口
          this.$confirm('确认生成充值卡吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            // 点击确定后写卡
            if (_this.locked) {
              return
            }
            _this.locked = true
            if (this.temp.cardType === 1) { // 说明是实体卡
              this.readCardCodeSubmit(1)// 提交表单
            } else { // 说明是虚拟卡
              const res = await topUpAdministrationSave(this.params)
              if (res.status === 200) {
                // 修改客户默认支付类型
                this.updateCsmDefaultPaymentMethod()
              }
            }
          })
        })
      },
      updateCsmDefaultPaymentMethod() {
        var _this = this
        // 说明客户默认支付方式预付卡
        if (_this.userInfo.defaultPaymentMethod === 256) {
          this.$message({
            type: 'success',
            message: '开卡成功！'
          })
          this.visible = false
        } else {
          this.$confirm('开卡成功，客户默认支付方式是否调整为预付卡？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            const res = await topUpAdministrationDefault({ csmId: this.userInfo.csmId })
            if (res.status === 200) {
              this.$message({
                type: 'success',
                message: '开卡成功！'
              })
            }
          })
        }
      },
      // 查询用户信息
      async onSearch() {
        const params = {
          csmStatus: 9 // 查询状态不是已注销的客户
        }
        if (this.temp.param !== '') {
          params[this.qtype] = this.temp.param
          const res = await topUpAdministrationUserInfo(params)
          if (!res.data) {
            this.$message({
              type: 'warning',
              message: '没有查询到相关数据'
            })
            return
          }
          if (res.data.csmStatus === 1) {
            this.$message({
              type: 'warning',
              message: '当前客户未审核'
            })
            return
          }
          if (res.data.csmStatus === 3) {
            this.$message({
              type: 'warning',
              message: '当前客户已挂失'
            })
            return
          }
          this.userInfo = res.data
          if (res.data.phoneItems.length) {
            this.phoneItems = res.data.phoneItems.filter(item => {
              return item.cpStatus === 2
            })
            if (this.phoneItems.length > 0) {
              this.temp.csmPhone = this.phoneItems[0].csmPhone
            }
          }
        } else {
          this.$message({
            type: 'warning',
            message: '查询条件不能为空'
          })
        }
      },
      // 获取卡号
      async addCardCode() {
        const { data } = await topUpAdministrationCradCode({
          codeType: 20
        })
        if (data) {
          this.temp.cardCode = data
        }
      },
      // 发送验证码
      async sendMessageCode() {
        if (!this.temp.csmPhone || !this.temp.param) {
          this.$message({
            type: 'warning',
            message: '请输入电话号码'
          })
          return
        }
        if (this.phoneItems.length === 0) {
          this.$message({
            type: 'warning',
            message: '请先查询客户'
          })
          return
        }
        if (this.startSendMessageCode === 0) {
          this.startSendMessageCode = 1
          // 发送接口
          const res = await topUpAdministrationCode({
            csmPhone: this.csmPhone,
            type: 1
          })
          console.log('res', res)
          this.timer = setInterval(() => {
            this.settime()
          }, 1000)
        }
      },
      /** 读取卡片**/
      readCardCodeSubmit(index) {
        var _this = this
        var isOpen = _this.obj.isSocketOpen()
        console.log('读卡状态..isOpen', isOpen)
        if (!isOpen) {
          this.$message({
            type: 'warning',
            message: '充值设备连接异常，请联系管理员'
          })
          _this.locked = false
          return
        }
        _this.comeFromSubmit = 'readCardCodeSubmit'
        _this.readerIndex = index
        _this.csmCardRWType = 1// 设置读卡器状态为读卡状态
        _this.OpenCsmcard() // 打开读卡器
      },
      // 打开读卡器
      OpenCsmcard() {
        var _this = this
        try {
          if (_this.isComOpen === false) {
            console.log('打开读卡器', _this.isComOpen)
            _this.obj.initialcom(100, 0)
          }
        } catch (e) {
          alert(e.message)
        }
        return
      },
      // 初始化读卡器
      initCardServer() {
        var _this = this
        _this.obj = SmartReader.OBJ()
        _this.obj.createSocket()
        _this.obj.onResult(async(rData) => {
          console.log('进入的状态,rData.FunctionID', rData.FunctionID)
          switch (rData.FunctionID) {
          case FUNCIDS._fid_initialcom:
            var rel = Number(rData.RePara_Int)
            if (rel === 0) {
              var hdev = parseInt(rData.RePara_Str)
              if (hdev !== -1) {
                _this.icdev = hdev
                _this.obj.beep(_this.icdev, 10) // do a beep
                _this.isComOpen = true // Set reader link status
                // _this.readerCardCode = "";
                _this.LoadKey() // 验证密码
              } else {
                _this.locked = false
                _this.$message({
                  type: 'warning',
                  message: '打开读卡器失败'
                })
                return
              }
            } else {
              _this.locked = false
              _this.$message({
                type: 'warning',
                message: '打开读卡器失败'
              })
              return
            }
            break
          case FUNCIDS._fid_exit: // 关闭读卡器
            break
          case FUNCIDS._fid_beep: // 峰槽声
            break
          case FUNCIDS._fid_loadKey: // 校验密码
            if (_this.csmCardRWType === 1) { // 说明是读卡状态
              _this.Read()
            } else if (_this.csmCardRWType === 2) { // 写卡充能
              _this.Write()
            } else if (_this.csmCardRWType === 3) { // 清卡功能
              _this.Write()
            }
            break
          case FUNCIDS._fid_findCardStr: // 读取操作进入
            var strcard = rData.RePara_Str
            if (strcard !== '') {
              _this.hasCard = true
              switch (_this.gl_wantFunc) {
              case _this.readClass:
              case _this.writeClass:
                _this.obj.authentication(_this.icdev, 0, _this.gl_sector)
                break
              }
            } else {
              _this.$message({
                type: 'warning',
                message: '充值设备连接异常，请联系管理员'
              })
              _this.locked = false
              _this.CloseCsmcard()
              return
            }
            break
          case FUNCIDS._fid_authenClass: // 读取
            var rel1 = Number(rData.RePara_Int)
            if (rel1 === 0) {
              switch (_this.gl_wantFunc) {
              case _this.readClass: // 读卡号
                // 读取卡号
                if (_this.readerIndex === 1) {
                  _this.obj.read(_this.icdev, _this.gl_BinBlock)
                  // 读取卡第二扇区值
                } else if (_this.readerIndex === 2) {
                  _this.obj.read(_this.icdev, 2)
                }
                break
              case _this.writeClass: // 写卡号
                var dateTime = Date.now() + ''
                var forDateTimeLength = 32 - dateTime.length
                for (var a = 0; a < forDateTimeLength; a++) {
                  dateTime = dateTime + 'b'
                }
                _this.params.cardStrCode = dateTime
                _this.params.readerCardCode = _this.readerCardCode
                _this.params.readerStrCode = _this.readerStrCode
                // 调用接口
                try {
                  var res = await topUpAdministrationSave(this.params)
                  _this.isFlag = true
                  console.log('读卡提交返回参数', res)
                  _this.locked = false
                  _this.CloseCsmcard()
                  // 修改客户默认支付类型
                  _this.updateCsmDefaultPaymentMethod()
                  // // 说明是写卡
                  // if (_this.csmCardRWType === 2) {
                  //   _this.obj.write(_this.icdev, _this.gl_BinBlock, _this.writerCsmCard)
                  //   _this.obj.write(_this.icdev, 2, dateTime)
                  // // 清除卡号
                  // } else if (_this.csmCardRWType === 3) {
                  //   _this.obj.write(_this.icdev, _this.gl_BinBlock, _this.writerCsmCard)
                  //   // 清除第二扇区时间戳
                  //   _this.obj.write(_this.icdev, 2, _this.writerCsmCard)
                  // }
                } catch (error) {
                  _this.isFlag = false
                  // 说明是写卡
                  if (_this.csmCardRWType === 2) {
                    _this.obj.write(_this.icdev, _this.gl_BinBlock, _this.writerCsmCard)
                    _this.obj.write(_this.icdev, 2, dateTime)
                  // 清除卡号
                  } else if (_this.csmCardRWType === 3) {
                    _this.obj.write(_this.icdev, _this.gl_BinBlock, _this.writerCsmCard)
                    // 清除第二扇区时间戳
                    _this.obj.write(_this.icdev, 2, _this.writerCsmCard)
                  }
                }
                break
              }
            } else {
              _this.$message({
                type: 'warning',
                message: '充值设备连接异常，请联系管理员'
              })
              _this.locked = false
              _this.CloseCsmcard()
              return
            }
            break
          case FUNCIDS._fid_readAsStr: // 输出读取的卡号
            var data = rData.RePara_Str
            if (data !== '') {
              // 读取卡号
              if (_this.comeFromSubmit === 'readCardCodeSubmit') { // 说明是提交表单
                if (_this.readerIndex === 1) {
                  _this.readerCardCode = data
                  // 处理卡号
                  if (_this.readerCardCode === '') {
                    _this.$message({
                      type: 'warning',
                      message: '读取卡号失败'
                    })
                    _this.locked = false
                    _this.CloseCsmcard()
                    return
                  }

                  var strArr = _this.readerCardCode.split('')
                  var newCardCode = ''
                  for (var x = 0; x < strArr.length; x++) {
                    if (strArr[x] !== 'A' && strArr[x] !== 'a') {
                      newCardCode = newCardCode + strArr[x]
                    }
                  }
                  // 卡号
                  _this.readerCardCode = newCardCode
                  _this.CloseCsmcard()
                  _this.readCardCodeSubmit(2)
                } else if (_this.readerIndex === 2) {
                  // 读取第二扇区值
                  _this.readerStrCode = data
                  // 读取完成第二扇区随机数,将readerIndex值设置成默认值
                  _this.readerIndex = 1
                  _this.CloseCsmcard()
                  _this.writerCardCode()
                }
              }
            } else {
              _this.$message({
                type: 'warning',
                message: '充值设备连接异常，请联系管理员'
              })
              _this.locked = false
              _this.CloseCsmcard()
              return
            }
            break
          case FUNCIDS._fid_writeAsStr: // 输出写入的卡号
            var iRet = Number(rData.RePara_Int)
            if (iRet === 0) {
              // 写入卡片成功
              _this.CloseCsmcard()
              // 修改客户默认支付类型
              if (_this.isFlag) {
                _this.updateCsmDefaultPaymentMethod()
              } else {
                _this.locked = false
              }
            } else {
              _this.$message({
                type: 'warning',
                message: '写入卡片失败'
              })
              _this.CloseCsmcard()
              return
            }
            break
          }
        })
      },
      // 校验A密码
      LoadKey() {
        var _this = this
        _this.obj.loadkey(_this.icdev, 0, _this.gl_sector, 'FFFFFFFFFFFf') // Load key, 0: keyA, ffffffffffff:key
      },
      // 读卡
      Read() {
        var _this = this
        _this.obj.findcardStr(_this.icdev, 0)// 1);     //1: multy card mode
        _this.gl_wantFunc = _this.readClass
      },
      // 写卡
      Write() {
        var _this = this
        _this.obj.findcardStr(_this.icdev, 0)// 1);     //1: multy card mode
        _this.gl_wantFunc = _this.writeClass
      },
      // 关闭读卡器
      CloseCsmcard() {
        var _this = this
        _this.obj.exit(_this.icdev)
        _this.isComOpen = false // Set unlink status
      },
      /** 写入卡片**/
      writerCardCode() {
        // 获取卡前缀
        // 获取卡号
        // 定义A,B密码
        /** 读卡器操作**/
        // 打开读卡器
        // 校验初始密码
        // 写入数据
        // 写入密码
        // 关闭读卡器

        var _this = this
        // 获取卡编号
        var cardCode = _this.temp.cardCode
        if (!cardCode) {
          _this.$message({
            type: 'warning',
            message: '请生成卡编号'
          })
          return
        }
        var cardCodeLength = cardCode.length
        var forLength = 32 - cardCodeLength
        for (var x = 0; x < forLength; x++) {
          cardCode = cardCode + 'a'
        }
        _this.writerCsmCard = cardCode
        _this.csmCardRWType = 2// 设置读卡器状态为写卡状态
        _this.OpenCsmcard() // 打开读卡器
      },
      // 充值金额
      onInput(value) {
        const res = value
          .replace(/[^\d.]/g, '')
          .replace(/\.{2,}/g, '.')
          .replace(/^\./g, '')
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.')
          .replace(/^0\d+|^\./g, '')
          .replace(/^(.*\..{2}).*$/, '$1')
        this.temp.feeCount1 = res
      },
      // 充值
      clearData() {
        this.userInfo = {}
        this.phoneItems = []
        this.temp.csmPhone = ''
        this.temp.param = ''
      },
      async formatInput(e) {
        if (e.target.value) {
          const res = await topUpAdministrationPrice({ feeCount1: this.temp.feeCount1 * 100 })
          var result = res.data // 赠送金额
          if (result !== 0) {
            result = result * 1.00 / 100
            result = isNaN(result) ? '0.00' : result.toFixed(2)
          }
          // 赠送金额
          this.temp.feeCount2 = result
          // 设置卡内余额
          this.temp.cardStatus = this.temp.feeCount1
          // 设置应收金额
          this.temp.totalPrice = (this.temp.feeCount1 * 1) + (result * 1) + (this.temp.cardFee * 1)
        }
      },
      // 验证码倒计时
      settime() {
        if (this.countdown === 0) {
          clearInterval(this.timer)
          this.btnCode = '免费获取验证码'
          this.countdown = 60
          this.startSendMessageCode = 0
          return
        } else {
          this.countdown--
          this.btnCode = `重新发送${this.countdown}`
        }
      },
      reset() {
        this.qtype = 'csmRgPhone'
        this.userInfo = {}
        this.phoneItems = []
        this.temp = {
          param: '',
          csmPhone: '',
          messageCode: '', // 验证码
          cardType: 1,
          cardFee: 22.22,
          totalPrice: 22.22, // 应收金额
          cardCode: '',
          password1: '', // 付款密码
          password2: '', // 确认密码
          feeCount1: '0.00', // 充值金额
          feeCount2: '0.00', // 赠送金额
          cardStatus: '0.00' // 卡内余额
        }
        this.$nextTick(() => {
          this.visible = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 20px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
    .content {
      margin-bottom: 0;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .form {
    display: flex;
    flex-wrap: wrap;
    & /deep/ .el-form-item {
      width: 50%;
      padding-right: 10px;
      .el-form-item__content > .el-select {
        width: 100%;
      }
    }
    .form-icon {
      display: flex;
      width: 100%;
      margin-bottom: 20px;
      font-size: 14px;
      .icon-info {
        width: 30%;
      }
    }
    /deep/.el-radio-group {
      display: flex;
    }
    /deep/.el-form-item__content {
      margin-left: 10px !important;
    }
  }
}
</style>
